<template>
  <div class="reports-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>PK记录管理</span>
          <el-button type="primary" @click="refreshData">
            <el-icon><Refresh /></el-icon>
            刷新数据
          </el-button>
        </div>
      </template>
      
      <div class="reports-content">
        <!-- 筛选区域 -->
        <div class="filter-section">
          <el-row :gutter="20">
            <el-col :span="6">
              <el-input
                v-model="filterForm.keyword"
                placeholder="搜索用户名或昵称"
                clearable
                @keyup.enter="handleSearch"
              >
                <template #prefix>
                  <el-icon><Search /></el-icon>
                </template>
              </el-input>
            </el-col>
            <el-col :span="9">
              <el-date-picker
                v-model="filterForm.dateRange"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                @change="handleSearch"
              />
            </el-col>
            <el-col :span="4" >
              <el-select
                v-model="filterForm.result"
                placeholder="PK结果"
                clearable
                @change="handleSearch"
              >
                <el-option label="全部" value="" />
                <el-option label="用户1胜利" value="user1_win" />
                <el-option label="用户2胜利" value="user2_win" />
                <el-option label="平局" value="draw" />
              </el-select>
            </el-col>
            <el-col :span="5">
              <el-button type="primary" @click="handleSearch">
                <el-icon><Search /></el-icon>
                搜索
              </el-button>
              <el-button @click="handleReset">
                <el-icon><RefreshRight /></el-icon>
                重置
              </el-button>
            </el-col>
          </el-row>
        </div>

        <!-- 数据表格 -->
        <el-table
          :data="tableData"
          v-loading="loading"
          style="width: 100%"
          row-key="id"
        >
          <el-table-column type="index" label="序号" width="60" />
          
          <el-table-column prop="pkId" label="PK编号" width="100" />
          
          <el-table-column label="对战双方" width="280">
            <template #default="scope">
              <div class="pk-users">
                <div class="user-info">
                  <el-avatar :size="30" :src="scope.row.user1.avatar" />
                  <span class="username">{{ scope.row.user1.name }}</span>
                </div>
                <el-icon class="vs-icon"><SwitchButton /></el-icon>
                <div class="user-info">
                  <el-avatar :size="30" :src="scope.row.user2.avatar" />
                  <span class="username">{{ scope.row.user2.name }}</span>
                </div>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="PK结果" width="150" align="center">
            <template #default="scope">
              <el-tag
                :type="getResultTagType(scope.row.result)"
                effect="plain"
              >
                {{ getResultText(scope.row.result) }}
              </el-tag>
            </template>
          </el-table-column>

          <el-table-column label="得分情况" width="120" align="center">
            <template #default="scope">
              <span class="score">
                {{ scope.row.user1Score }} : {{ scope.row.user2Score }}
              </span>
            </template>
          </el-table-column>

          <el-table-column prop="subject" label="竞赛方向" width="100" align="center" />

          <el-table-column prop="duration" label="用时" width="80" align="center">
            <template #default="scope">
              {{ formatDuration(scope.row.duration) }}
            </template>
          </el-table-column>

          <el-table-column prop="endTime" label="结束时间" width="160" align="center">
            <template #default="scope">
              {{ formatDateTime(scope.row.endTime) }}
            </template>
          </el-table-column>

          <el-table-column label="操作" fixed="right" width="120">
            <template #default="scope">
              <el-button
                link
                type="primary"
                @click="viewDetail(scope.row)"
              >
                <el-icon><View /></el-icon>
                查看详情
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="pagination-container">
          <el-pagination
            v-model:current-page="pagination.currentPage"
            v-model:page-size="pagination.pageSize"
            :page-sizes="[10, 20, 50, 100]"
            :total="pagination.total"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </el-card>

    <!-- 详情弹窗 -->
    <el-dialog
      v-model="detailVisible"
      title="PK详情"
      width="800px"
      :close-on-click-modal="false"
    >
      <div v-if="currentDetail" class="detail-content">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="PK编号">{{ currentDetail.pkId }}</el-descriptions-item>
          <el-descriptions-item label="竞赛方向">{{ currentDetail.subject }}</el-descriptions-item>
          <el-descriptions-item label="开始时间">{{ formatDateTime(currentDetail.startTime) }}</el-descriptions-item>
          <el-descriptions-item label="结束时间">{{ formatDateTime(currentDetail.endTime) }}</el-descriptions-item>
          <el-descriptions-item label="总用时">{{ formatDuration(currentDetail.duration) }}</el-descriptions-item>
          <el-descriptions-item label="PK结果">
            <el-tag :type="getResultTagType(currentDetail.result)">
              {{ getResultText(currentDetail.result) }}
            </el-tag>
          </el-descriptions-item>
        </el-descriptions>

        <el-divider>对战详情</el-divider>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-card class="user-detail-card">
              <template #header>
                <div class="user-header">
                  <el-avatar :src="currentDetail.user1.avatar" />
                  <span class="user-name">{{ currentDetail.user1.name }}</span>
                </div>
              </template>
              <div class="user-stats">
                <div class="stat-item">
                  <span class="label">得分：</span>
                  <span class="value score-value">{{ currentDetail.user1Score }}</span>
                </div>
                <div class="stat-item">
                  <span class="label">正确率：</span>
                  <span class="value">{{ currentDetail.user1Accuracy }}%</span>
                </div>
                <div class="stat-item">
                  <span class="label">答题数：</span>
                  <span class="value">{{ currentDetail.user1Questions }}</span>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card class="user-detail-card">
              <template #header>
                <div class="user-header">
                  <el-avatar :src="currentDetail.user2.avatar" />
                  <span class="user-name">{{ currentDetail.user2.name }}</span>
                </div>
              </template>
              <div class="user-stats">
                <div class="stat-item">
                  <span class="label">得分：</span>
                  <span class="value score-value">{{ currentDetail.user2Score }}</span>
                </div>
                <div class="stat-item">
                  <span class="label">正确率：</span>
                  <span class="value">{{ currentDetail.user2Accuracy }}%</span>
                </div>
                <div class="stat-item">
                  <span class="label">答题数：</span>
                  <span class="value">{{ currentDetail.user2Questions }}</span>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
      
      <template #footer>
        <el-button @click="detailVisible = false">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import {
  Refresh,
  Search,
  RefreshRight,
  SwitchButton,
  View
} from '@element-plus/icons-vue'

// 响应式数据
const loading = ref(false)
const tableData = ref([])
const detailVisible = ref(false)
const currentDetail = ref(null)

// 筛选表单
const filterForm = reactive({
  keyword: '',
  dateRange: [],
  result: ''
})

// 分页信息
const pagination = reactive({
  currentPage: 1,
  pageSize: 20,
  total: 0
})

// 模拟数据
const mockData = [
  {
    id: 1,
    pkId: 'PK001',
    user1: {
      name: '张三',
      avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
    },
    user2: {
      name: '李四',
      avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
    },
    user1Score: 85,
    user2Score: 78,
    result: 'user1_win',
    subject: '数学',
    duration: 1800,
    startTime: '2024-01-15 14:30:00',
    endTime: '2024-01-15 15:00:00',
    user1Accuracy: 85,
    user2Accuracy: 78,
    user1Questions: 20,
    user2Questions: 20
  },
  {
    id: 2,
    pkId: 'PK002',
    user1: {
      name: '王五',
      avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
    },
    user2: {
      name: '赵六',
      avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
    },
    user1Score: 92,
    user2Score: 92,
    result: 'draw',
    subject: '英语',
    duration: 1500,
    startTime: '2024-01-15 16:00:00',
    endTime: '2024-01-15 16:25:00',
    user1Accuracy: 92,
    user2Accuracy: 92,
    user1Questions: 25,
    user2Questions: 25
  }
]

// 页面加载时获取数据
onMounted(() => {
  loadData()
})

// 加载数据
const loadData = () => {
  loading.value = true
  
  // 模拟API调用
  setTimeout(() => {
    tableData.value = mockData
    pagination.total = mockData.length
    loading.value = false
  }, 500)
}

// 刷新数据
const refreshData = () => {
  loadData()
  ElMessage.success('数据已刷新')
}

// 搜索
const handleSearch = () => {
  loadData()
}

// 重置筛选
const handleReset = () => {
  filterForm.keyword = ''
  filterForm.dateRange = []
  filterForm.result = ''
  loadData()
}

// 分页大小改变
const handleSizeChange = (val) => {
  pagination.pageSize = val
  loadData()
}

// 当前页改变
const handleCurrentChange = (val) => {
  pagination.currentPage = val
  loadData()
}

// 查看详情
const viewDetail = (row) => {
  currentDetail.value = row
  detailVisible.value = true
}

// 获取结果标签类型
const getResultTagType = (result) => {
  switch (result) {
    case 'user1_win':
    case 'user2_win':
      return 'success'
    case 'draw':
      return 'warning'
    default:
      return 'info'
  }
}

// 获取结果文本
const getResultText = (result) => {
  switch (result) {
    case 'user1_win':
      return '用户1胜利'
    case 'user2_win':
      return '用户2胜利'
    case 'draw':
      return '平局'
    default:
      return '未知'
  }
}

// 格式化时长
const formatDuration = (seconds) => {
  const minutes = Math.floor(seconds / 60)
  const remainingSeconds = seconds % 60
  return `${minutes}分${remainingSeconds}秒`
}

// 格式化日期时间
const formatDateTime = (dateTime) => {
  return dateTime.replace(' ', ' ')
}
</script>

<style scoped>
.reports-container {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.reports-content {
  padding: 20px;
}

.filter-section {
  margin-bottom: 20px;
}

.pk-users {
  display: flex;
  align-items: center;
  gap: 10px;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.username {
  font-size: 14px;
  color: #606266;
}

.vs-icon {
  color: #909399;
  font-size: 16px;
}

.score {
  font-weight: bold;
  color: #409eff;
}

.pagination-container {
  margin-top: 20px;
  text-align: center;
}

.detail-content {
  padding: 0 20px;
}

.user-detail-card {
  height: 100%;
}

.user-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.user-name {
  font-weight: bold;
  font-size: 16px;
}

.user-stats {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.stat-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.label {
  color: #606266;
}

.value {
  font-weight: bold;
  color: #303133;
}

.score-value {
  color: #409eff;
  font-size: 18px;
}
</style>